<template>
  <li class="a-question">
    <div class="AQ">
      <router-link :to="'/question/'+data.question_id" class="question-content ">
        <p>{{data.title}}</p>
      </router-link>
      <div>
        <div class="question-answer">
          <div class="avatar" style="position:relative;width:1.85rem;height:1.85rem;border-radius:50%;display:inline-block;">
            <img style="position:relative;width:1.85rem;height:1.85rem;border-radius:50%;display:inline-block;" class="avatarImg" :src="data.professor_avatar">
            <img class="verified" style="position:absolute;width:0.6166666666666667rem;height:0.6166666666666667rem;right:0;bottom:0;"
              src="/fengshui/static/pic/icon/verified.png"></div>
          <player v-on:listenCountIncrease="addListenCount"  :id="data.answer_id"></player>
          <div class="question-visitor"><span>听过 </span><span>{{data.listen_count}}</span></div>
        </div>

      </div>
      <router-link :to="'/professor/'+data.professor_id">
      <div class="question-respondent">
        <p class="nickname">{{data.professor_name}}</p>
        <p class="title">{{data.professor_title}}</p>
        <!--<span class="follow">收听</span>-->
      </div>
      </router-link>
    </div>
  </li>
</template>
<script>
    export default {
        props: ['data'],
        methods: {
            questionClick: function() {

            },
            addListenCount: function() {
                this.data.listen_count = Number(this.data.listen_count) + 1;
            }
        }
    }
</script>
<style scoped>
    li {
        list-style-type: none;
    }
    
    .a-question {
        background: #fff;
        padding: .75rem .9rem;
        margin-bottom: .6rem;
        overflow: hidden;
    }
    
    a,
    img {
        -webkit-touch-callout: none;
        text-decoration: none;
    }
    
    .a-question .question-content {
        margin-bottom: .3rem;
        line-height: 1.1rem;
        color: #3f3f3f;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    
    .a-question .question-answer {
        margin-top: .3rem;
    }
    
    .a-question .question-answer .avatar {
        display: inline-block;
        margin-right: .675rem;
        vertical-align: middle;
    }
    
    .a-question .question-respondent {
        position: relative;
        margin-top: .8rem;
        padding-right: 2.7rem;
    }
    
    .a-question .question-respondent .nickname {
        display: inline-block;
        max-width: 100%;
        font-size: .75rem;
        color: #3f3f3f;
        box-sizing: border-box;
    }
    
    .a-question .question-respondent .title {
        font-size: .65rem;
        color: #999;
    }
    
    .a-question .question-respondent p {
        line-height: 1.4;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
    }
    
    .a-question .question-visitor {
        line-height: 2.2rem;
        color: #999;
        float: right;
        font-size: .75rem;
    }
    
    .a-question .question-respondent .follow,
    .questions .a-question .question-respondent .followed {
        position: absolute;
        right: 0;
        bottom: .2rem;
        width: 2.4rem;
        height: 1.45rem;
        text-indent: -9999px;
        background-repeat: no-repeat;
        background-size: 100% auto;
    }
    
    .a-question .question-respondent .follow {
        background-image: url('/fengshui/static/pic/follow.png');
    }
</style>